<template>
	<view class="wrap" v-if="list.length > 0">
		<swiper class="swiper-box" :current="swiperCurrent" :indicator-dots="true" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, key) in list" :key="key">
				<fa-navbar :title="item.activity.title" :border-bottom="false"></fa-navbar>
				<scroll-view scroll-y style="height: 100%;width: 100%;" refresher-default-style="black"
					:refresher-enabled="refresherEnabled" :refresher-triggered="triggered" :refresher-threshold="45"
					refresher-background="lightgreen" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
					@refresherrestore="onRestore" @refresherabort="onAbort">
					<!-- 顶部导航 -->


					<view class="cardContent">
						<!-- {{ card.content }} -->
						<view class="contentLeft">
							<view class="LeftTop">
								<image :src="item.activity.images" mode=""></image>
							</view>
						</view>
						<view class="contentRight">

							<view class="RightBotton">
								<view class="botton1">
									{{item.activity.content}}
								</view>
								<view class="botton2">
									<view class="Dli">
										{{item.activity.qualified_number}} {{$t('common.of')}}
										{{item.activity.total_number}}
										<br>
										{{$t('step.eligible.players')}}
									</view>
									<view class="Dli">
										{{$t('common.currency')}}{{item.activity.prize_pool.toLocaleString("pt-BR")}}
										<br>
										{{$t('activity.pot')}}
									</view>

								</view>
							</view>
							<view class="RightTop">

								<view class="top2">
									{{item.activity.start_date}} - {{item.activity.end_date}} · {{item.activity.weeks}}
									{{$t('activity.weeks')}}
								</view>

							</view>
						</view>

					</view>
					<view class="split"></view>
					<!-- 计步器 -->

					<view class="container">
						<!-- 用于显示圆环进度条的canvas -->
						<canvas canvas-id="stepCircle" class="circle-canvas">
							<view class="step-center">
								<text class="current-steps" @click="count">{{ currentSteps }}</text>
								<text class="step-text">{{$t('common.step')}}</text>
							</view>
						</canvas>

						<!-- 步数信息放置在圆圈中心 -->


						<!-- Active day 和 Power day 信息 -->
						<view class="step-info2">
							<text><span
									style="color: #B5CB46; margin-right: 8px;">{{$t('step.active day')}}</span><br />
								{{ activeDay }} {{$t('common.step')}}</text>
						</view>
						<view class="step-info">
							<text><span style="color: #52CC80; margin-right: 8px;">{{$t('step.power day')}}</span><br />
								{{ powerDay }} {{$t('common.step')}}</text>
						</view>
						<view class="shareText" @click="navigateToPage">
							{{$t('common.share')}}
						</view>
					</view>

					<view class="split"></view>
					<view class="weekTime">
						<view class="weekTitle">
							<view>{{$t('step.week')}} {{item.activity.weeks_num}} {{$t('common.of')}}
								{{item.activity.weeks}}
							</view>
							<view @click="goPage('/pages/step/past_weeks?id='+item.id)">{{$t('step.pastweeks')}} →
							</view>
						</view>
						<view class="weekFlex">
							<view class="week">
								<view class="top">
									{{$t('common.week.sunday')}}
								</view>
								<view :class="getClass(step['0'],0)">
								</view>
								<view class="bottom">
									{{step['0']}}
								</view>
							</view>
							<view class="week">
								<view class="top">
									{{$t('common.week.monday')}}
								</view>
								<view :class="getClass(step['1'],1)">
								</view>
								<view class="bottom">
									{{step['1']}}
								</view>

							</view>
							<view class="week">
								<view class="top">
									{{$t('common.week.tuesday')}}
								</view>
								<view :class="getClass(step['2'],2)">

								</view>
								<view class="bottom">
									{{step['2']}}
								</view>
							</view>
							<view class="week">
								<view class="top">
									{{$t('common.week.wednesday')}}
								</view>
								<view :class="getClass(step['3'],3)">

								</view>
								<view class="bottom">
									{{step['3']}}
								</view>
							</view>
							<view class="week">
								<view class="top">
									{{$t('common.week.thursday')}}
								</view>
								<view :class="getClass(step['4'],4)">

								</view>
								<view class="bottom">
									{{step['4']}}
								</view>
							</view>
							<view class="week">
								<view class="top">
									{{$t('common.week.friday')}}
								</view>
								<view :class="getClass(step['5'],5)">

								</view>
								<view class="bottom">
									{{step['5']}}
								</view>
							</view>
							<view class="week">
								<view class="top">
									{{$t('common.week.saturday')}}
								</view>
								<view :class="getClass(step['6'],6)">

								</view>
								<view class="bottom">
									{{step['6']}}
								</view>
							</view>
						</view>
					</view>
					<view class="week-tips"></view>
					<view class="updateNow">

					</view>
				</scroll-view>
			</swiper-item>

		</swiper>
	</view>
	<view class="wrap page-box" v-else>
		<fa-navbar title="My step" :border-bottom="false"></fa-navbar>

		<view class="centre">
			<image src="../../static/image/order.png" mode=""></image>
			<view class="explain">
				{{$t('step.no activity')}}				 
			</view>
			<view class="btn">
				<u-button size="medium"
					:custom-style="{ width: '220rpx', backgroundColor: theme.bgColor, color: theme.color }"
					shape="circle" @click="goPage('/pages/activity/lists')">
					{{$t('step.take a stroll')}}
				</u-button>
			</view>
		</view>

	</view>
</template>
<script>
	// 引入uniapp的API
	// #ifdef APP-PLUS
	var StepCounter = uni.requireNativePlugin('YStep-Counter');
	// #endif

	var that;
	export default {
		data() {
			return {
				refresherEnabled: true,
				triggered: false,
				_freshing: false,
				isOpenRefresh: true, // 是否开启下拉
				currentSteps: 1, // 当前步数
				activeDay: 7400, // 活跃日步数标准
				powerDay: 9000, // 强力日步数标准				
				list: [],
				current: 0,
				swiperCurrent: 0,
				dx: 0,
				week: 0,
				step: 0,

			};
		},
		// 下拉刷新

		onLoad() {
			console.log('onLoad')
			var date = new Date()
			this.week = date.getDay()

			this.getMyStep()
			setTimeout(()=>{this.drawCircle(1);},50)
			
			that = this
			// #ifdef APP-PLUS
			StepCounter.setStepCallback(function(res) {
				console.log('setStepCallback');
				let diff = res.numberOfSteps - that.currentSteps;
				let _currentSteps = that.currentSteps
				that.currentSteps = res.numberOfSteps; //当天累计步数
				var distance = res.distance; //当天累计距离
				//10步重绘圆环
				if (diff > 10 || _currentSteps == 0) {
					that.drawCircle(that.currentSteps);
				}
				console.log("步数：" + that.currentSteps + "步, 距离：" + distance.toFixed(0) + "米");
			});
			// #endif



		},


		methods: {
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				//console.log("onpulling", e);
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				//this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				//界面下拉触发，triggered可能不是true，要设为true ，否则无法重置
				if (!this.triggered) {
					this.triggered = true;
				}
				this.getMyStep()
				console.log("onRefresh");
			},
			// 自定义下拉刷新被复位
			onRestore() {
				//this.triggered = false; //'restore'; // 需要重置
				console.error("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.error("onAbort");
			},
			count() {
			 
				// #ifdef APP-PLUS
				StepCounter.queryStepCounter(function(res) {
					console.log('queryStepCounter');
					console.log(res)
					if (res) {
						that.currentSteps = res.numberOfSteps; //当天累计步数
						that.drawCircle(that.currentSteps);
					}
				})
				// #endif


			},
			navigateToPage() {
				uni.navigateTo({
					url: '/pages/Search/share' // 这里填写要跳转的页面路径
				});
			},
			drawCircle(currentSteps) {
				const context = uni.createCanvasContext('stepCircle', this);
				let goalSteps = this.powerDay
				const percent = currentSteps / goalSteps; // 计算百分比
				const angle = percent * 2 * Math.PI; // 百分比对应的角度

				const centerX = 75; // 缩小后的圆心X轴位置
				const centerY = 75; // 缩小后的圆心Y轴位置
				const radius = 60; // 缩小后的圆半径

				// 绘制背景圆环
				context.setStrokeStyle('#e6e6e6'); // 背景颜色
				context.setLineWidth(10); // 缩小线条宽度
				context.beginPath();
				context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); // 圆心坐标和半径
				context.stroke();

				// progress 是进度
				let progress = this.currentSteps;

				// 设置阈值，当进度达到阈值时变为绿色
				const threshold = this.activeDay;
				console.log(percent, currentSteps)
				// 判断是否达到阈值，动态设置颜色
				let dynamicColor = '#B5BDC0'; // 达到阈值为绿色，否则为灰色
				if (this.currentSteps >= this.activeDay && this.currentSteps < this.powerDay) {
					dynamicColor = '#c2e605'
				} else if (this.currentSteps >= this.activeDay) {
					dynamicColor = '#29BC64'
				} else {
					dynamicColor = '#B5BDC0'
				}
				// 绘制进度圆环,设置动态颜色
				context.setStrokeStyle(dynamicColor); // 动态进度颜色
				context.setLineCap('round'); // 使进度条头尾圆滑
				context.setLineWidth(10); // 缩小线条宽度
				context.beginPath();
				context.arc(centerX, centerY, radius, Math.PI / 2, angle + Math.PI / 2, false); // 从底部开始绘制
				context.stroke();

				// 将绘制的内容提交到canvas
				context.draw();
			},

			transition({
				detail: {
					dx
				}
			}) {
				this.refresherEnabled = false;
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.refresherEnabled = true;
				console.log('animationfinish');
				// this.triggered = false;
				this.swiperCurrent = current;
				this.current = current;
			},
			getClass(steps, week) {
				let step_class = 'unknow'
				if (steps >= 9000) {
					step_class = "power"
				} else if (steps >= 7400 && steps < 9000) {
					step_class = "active"
				} else if (steps > 0 && steps < 7400) {
					step_class = "lost"
				} else {
					step_class = 'unknow'
				}
				if (week == this.week) {
					step_class += ' stepping';

				}
				return step_class;
			},
			getMyStep() {
				this.$api.activitySteps({
					status: 'stepping'
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data.list;
						this.step = res.data.step;
					}
					this.triggered = false;
					this._freshing = false;
				});
			}


		}
	};
</script>

<style lang="scss" scoped>
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.inviteText {
		height: 35px;
		line-height: 35px;
		text-align: center;
		font-size: 13px;
		background-color: #29BC64;
		color: #fff;
	}

	.cardContent {
		padding: 10px;
		display: flex;
		// height: 200px;
		box-sizing: border-box;

		.contentLeft {
			width: 30%;

			.LeftTop {

				image {
					width: 100%;
					height: 80px;
					border-radius: 8px;
				}
			}


		}

		.contentRight {
			width: 70%;
			padding: 0 10px;

			.RightTop {
				width: 100%;


				.top2 {
					color: #000000;
					font-size: 12px;

				}

			}

			.RightBotton {
				width: 100%;

				.botton1 {
					font-size: 13px;
				}

				.botton2 {
					font-size: 12px;
					display: flex;
					color: #29BC64;
					/* font-weight: bold; */
					margin: 10px auto;

					.Dli {
						margin-right: 20px;
					}
				}
			}

		}

	}


	//计步器
	.container {
		padding-bottom: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 220px;

		position: relative;

	}

	.circle-canvas {
		width: 150px;
		height: 150px;
		position: relative;
		/* 确保绝对定位的容器 */
	}

	.step-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 精确地将步数放在圆心 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.current-steps {
		font-size: 24px;
		/* 当前步数字体大小 */
		font-weight: bold;
		color: #B7BAC3;
	}

	.step-text {
		font-size: 16px;
		/* "steps" 文本的字体大小 */
		color: #888;
	}

	.step-info {
		position: absolute;
		left: 50%;
		top: 149px;
		margin-top: 10px;
		text-align: center;
		font-size: 14px;
	}

	.step-info text {
		display: block;
		margin-top: 10px;
		font-size: 12px;
		color: #888;
	}

	.step-info2 {
		position: absolute;
		right: 14%;
		top: 80px;
		margin-top: 10px;
		text-align: center;
		font-size: 14px;
	}

	.step-info2 text {
		display: block;
		margin-top: 10px;
		font-size: 12px;
		color: #888;
	}

	.updateNow {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 30px;
		line-height: 35px;
		text-align: center;
		font-size: 12px;
		background-color: #f3fff8;
		color: #fff;
	}

	.week-tips {
		text-align: center;
	}

	.shareText {
		position: absolute;
		right: 20px;
		top: 0;
		margin-top: 10px;
		color: #29BC64;
		font-weight: bold;

	}

	.split {
		border-top: #eeeeee solid 1px;
		border-bottom: #eeeeee solid 1px;
		height: 10px;
		background-color: #ebfbee;
	}

	.weekTime {
		height: 180px;
		background-color: #fff;

		.weekTitle {
			font-weight: bold;
			font-size: 13px;
			padding: 10px 10px 10px 10px;
			color: #6c7379;
			display: flex;
			justify-content: space-between;
		}

		.weekFlex {
			height: 150px;
			display: flex;
			color: #ebfbee;

			// background-color: #ebfbee;
			.week {
				text-align: center;
				width: 60px;

				// background-color: #888;
				.top {
					text-align: center;
					padding-top: 10px;
					font-size: 14px;
					color: #868e96;
				}

				.unknow {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;

					border-radius: 35px;
					border: 1px dashed #B7BAC3;
				}


				.stepping {
					border: 1px dashed #fff !important;
				}

				.lost {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;
					background-color: #ccc;
					border-radius: 35px;
					border: 1px solid #B7BAC3;
				}

				.power {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;
					background-color: #29BC64;
					background-image: url("../../static/image/power.png");
					background-size: 80% 80%;
					background-position: 50% 50%;
					background-repeat: no-repeat;
					border-radius: 35px;
					border: 1px solid #29BC64;
				}

				.active {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;
					background-color: #C1E804;
					background-image: url("../../static/image/right.png");
					background-size: 65% 65%;
					background-position: 50% 50%;
					background-repeat: no-repeat;
					border-radius: 35px;
					border: 1px solid #C1E804;
				}

				.bottom {
					text-align: center;

					font-size: 14px;
					color: #868e96;
				}
			}



		}
	}



	.subCon {

		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #dff6dd;
		// padding: 0 10px;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.page-box {
		padding-top: 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.centre {
		text-align: center;
		padding: 104px 0;
		font-size: 16px;
	}

	.centre .btn {
		margin: 41px auto;
		width: 104px;
		border-radius: 16px;
		line-height: 33px;
		color: #ffffff;
		font-size: 13px;
	}
</style>